<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/index.css">
	<style>
		.container-fluid{
			margin: 0px;
			padding: 0px;
		}
		.see{
			position: absolute;
			font-size: 18px;
			padding-top: 100px;
			padding-left: 60px;
		}
		.aa{
			padding-top: 10px;
			padding-bottom: 20px;
		}
		.one{
			padding-top: 10px;
			padding-bottom: 5px;
			padding-left: 5px;
			padding-right: 5px;
		}
		a:link{
			color:black;
		}
		a:visited{
			color: grey;
		}
		a:hover{
			color:black;
			font-weight: bold;
			/* text-decoration: underline; */
			border-bottom: 5px solid #00a862;
		}
		a{
            text-decoration: none;
        }
		.content{
			float: right;
			width: 66.6%;
			/* border: solid pink; */
		}
		.one img{
			width: 100%;
		}
		.two{
			background-color: #f7f7f7;
			height: 400px;
			width: 100%;
		}
		.two .head{
			text-align: center;
			padding-top: 20px;
		}
		.four .head{
			padding-top: 10px;
		}
		.two .left{
			/* padding: 20px; */
			padding-left: 60px;
			padding-top: 20px;
			padding-bottom: 20px;
			width: 300px;
			float: left;
			height: 300px;
		}
		.two .right{
			padding-right: 60px;
			padding-top: 20px;
			padding-bottom: 20px;
			float: right;
			width: 300px;
			height: 300px;
		}
		.right ul{
			margin: 0 auto;
			width: 280px;
		}
		.left ul{
			margin: 0 auto;
			width: 280px;
		}
		
		.three{
			width: 100%;
			height: 150px;
		}
		.three .img1{
			float: left;
			width: 33.3%;
		}
		.four{
			width: 100%;
			height: 400px;
		}
		.five{
			width: 100%;
			height: 300px;
		}
		.six{
			width: 100%;
			height: 400px;
		}
		.seven{
			width: 100%;
			height: 400px;
		}
	</style>
</head>
<body>
	<div class="container-fluid">
		<div class="row justify-content-end">
			<div class="col-lg-4 position-fixed border-right leftCon">
				<!-- 导航栏 -->
				<header class="navbar d-none d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
					<a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
					<ul class="nav mr-auto">
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">门店</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">我的账户</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">菜单</a>
						</li>
					</ul>
					<span class="iconfont icon-menu" id="showBtn"></span>
				</header>
				<!-- 展示 -->
				<div class="see">
					<p style="font-size: 32px;font-weight: bold;">关于星巴克</p>
					<div class="one"><a href="">星巴克在中国</a></div>
					<div class="one"><a  href="./work.html">工作机会</a></div>
					<div class="one"><a href="">企业新闻</a></div>
					<div class="one"><a href="">社会责任</a></div>
					<div class="one"><a href="">历史回顾</a></div>
					<div class="one"><a href="">联系我们</a></div>
				</div>
				<!-- 点击菜单后要展示的内容 -->
				<div class="d-flex bg-white flex-column justify-content-between position-absolute menu hide">
					<header class="navbar d-flex px-0 px-lg-3 py-3 py-lg-4">
						<a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
						<span class="iconfont icon-guanbi" id="closeBtn"></span>
					</header>
					<div class="list">
						<ul class="list-unstyled mx-sm-5 pl-sm-5">
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">门店</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星享俱乐部</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">菜单</a></li>
							<hr>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克移动应用</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星礼卡</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克臻选™</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">啡快™ － 在线点 到店取</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">专星送™</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">咖啡星讲堂</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">上海烘焙工坊</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">关于星巴克</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">帮助中心</a></li>
							<hr>
						</ul>	
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>
	<script>
		$('#showBtn').on('click',function(){
			$('.menu').removeClass('hide').addClass('show');
			shadowMenu();
		});
		$('#closeBtn').on('click',function(){
			$('.menu').removeClass('show').addClass('hide');
			shadowMenu();
		});
	</script>
	<div class="content">
		<div class="one">
			<img src="./images/background.png" alt="广告">
		</div>
		<div class="two">
			<div class="head">
				<p style="font-weight: bold;font-size: 32px;">关于星巴克</p>
			</div>
			<div class="left">
				<h4 style="color:#c2a661 ;text-align: center;font-weight: bold;padding-bottom: 5px;">伙伴文化</h4>
                    <p style="text-align: center;">有一个机会成为星巴克的伙伴</p>
                    <h4 style="text-align: center;font-weight: bold;padding-bottom: 5px;">我们的使命</h4>
                    <p style="text-align: center;">激发并孕育人文精神——每人、每<br>杯、每个社区</p>
                    <h4 style="text-align: center;font-weight: bold;padding-bottom: 5px;">伙伴·同行</h4>
					<ul type="circle" class="roll" style="text-align: left;">
						<li class="li1">
							在星巴克，我们称彼此为伙伴，伙伴们<br>一起共享在星巴克的无限机会，伙伴们<br>一起实现更多、成就更多
						</li>
						<li class="li1">
							在星巴克，连接更广阔的世界、做最好<br>的自己、成就非凡事业，让每一天都充<br>满意义地连接彼此、成就自己
						</li>
					</ul>
			</div>
			<div class="right">
				<h4 style="color:#c2a661 ;text-align: center;font-weight: bold;padding-bottom: 5px;">咖啡文化</h4>
					<ul type="circle" style="text-align: left;">
						<li>
							星巴克的咖啡文化不仅是延续传<br>统传播咖啡文化，还传递情感联<br>系
						</li>
						<li>
							始于对咖啡的热爱，星巴克从西<br>雅图出发到如今遍布世界各地，<br>让更多的人享受到高品质的咖啡
						</li>
						<li>
							同样始于对咖啡的热爱，星巴克<br>伙伴们从祖国各地汇聚在门店，<br>将这份咖啡之爱传递到更广阔的<br>天地
						</li>
						<li>
							星巴克提供了诸多机会让伙伴们<br>得以提高咖啡技能，围裙的不同<br>颜色代表从咖啡探索者到咖啡公<br>使的不同咖啡技能等级
						</li>
					</ul>
			</div>
		</div>
		<div class="three">
            <div class="img1"><img src="./images/1.png" alt="1" style="width: 100%;"></div>
            <div class="img1"><img src="./images/2.png" alt="1" style="width: 100%;"></div>
            <div class="img1"><img src="./images/3.png" alt="1" style="width: 100%;"></div>
		</div>
		<div class="four" style="background: url(./images/he.png);">
			<div class="head"><p style="font-weight: bold;font-size: 32px;">选择星巴克</p></div>
            <h2 style="color:#c2a661 ;padding-left: 48px;padding-top: 40px;">雇主赞誉</h2>
            <ul style="padding-left: 50px;padding-top: 20px;">
                <li>星巴克不只是一家“咖啡”公司更是一家和“人”有关的公司</li>
                <li>星巴克是咖啡知识和专业技能方面的领导者，同样对伙伴的<br>重视星巴克一样走在前列</li>
                <li>星巴克重视并认可伙伴们的持续贡献与持续投入，致力于帮<br>助他们实现个人和职业梦想。伙伴们拥有“咖啡豆股票”的权<br>益并享有“助房津贴计划”、“咖啡星享假期”和“父母关爱计划”<br>等福利</li>
                <li>星巴克的努力得到了业界的赞誉与认可，并因此获得多个机<br>构颁发的最佳雇主荣誉（多次被Aon、Universum、<br>LinkedIn等机构评选为中国最佳雇<br>主、中国最具吸引力雇主、中国典范雇主等）</li>
            </ul>
		</div>
		<div class="seven">
			<img src="./images/dao3.png" alt="" style="width: 100%;padding-top: 0px;">
		</div>
		<div class="six">
			<img src="./images/dao2.png" alt="" style="width: 100%;padding-top: 1px;">
		</div>
		<div class="five">
			<img src="./images/zui.png" alt="" style="width: 100%;padding-top: 40px;">
		</div>
	</div>
</body>
</html>